import { FC, useEffect, useRef, useState } from 'react';
import './index.less';
import { Button, Pagination, Space, Table } from 'antd';
import SettingDialog, { ISettingModelRef } from './component/OnSetting';
import HistoryDialog, { IHistoryModelRef } from './component/OnHistory';
import OnConfiguration from './component/OnConfiguration';
import { RotateConfigT } from '@/typings/global';
import { getRotateConfigBack } from '@/api/rotate-config-page';
import moment from 'moment';

const config: FC = () => {
  const [tableData, setTableData] = useState<Array<RotateConfigT>>([]);
  const [pageNum, setPageNum] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(10);
  const [total, setTotal] = useState<number>(0);
  const settingRef = useRef<ISettingModelRef>(null);
  const historyRef = useRef<IHistoryModelRef>(null);

  const columns = [
    {
      title: '时间',
      dataIndex: 'genTime',
      key: 'genTime',
      width: 60,
      render: (_, record) => <div>{moment(record.genTime).format('YYYY-MM-DD HH:mm:ss')}</div>
    },
    { title: '厂区', dataIndex: 'factory', key: 'factory', width: 40 },
    { title: '产线', dataIndex: 'productLine', key: 'productLine', width: 50 },
    {
      title: '旋转配置',
      dataIndex: 'rotateConfig',
      key: 'rotateConfig',
      width: 280,
      render: (_, record) => (
        <strong>{(record.isReverse ? '' : '无') + '翻转 顺时针旋转' + record.angle + '度 X偏移值（mm）:' + record.offsetX + ' Y偏移值（mm）:' + record.offsetY}</strong>
      )
    },
    { title: '备注', dataIndex: 'desc', key: 'desc', width: 90 },
    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      width: 90,
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => handleConfig('update', record)}>设置</a>
          <a onClick={() => onHistory(record)}>历史记录</a>
        </Space>
      )
    }
  ];

  useEffect(() => {
    initHandle();
  }, []);

  //初始化处理
  const initHandle = async () => {
    //请求数据
    const res = await getRotateConfigBack({ pageNum, pageSize });
    setTableData(res.data.list);
    setTotal(res.data.total);
  };

  //新增和设置
  const handleConfig = (type, record?) => {
    if (type === 'add') {
      settingRef.current?.handleEvent('add');
    } else {
      settingRef.current?.handleEvent('update', record);
    }
  };

  const onChangePage = async page => {
    setPageNum(page);
    const res = await getRotateConfigBack({ pageNum, pageSize });
    setTableData(res.data.list);
  };
  //历史记录
  const onHistory = record => {
    historyRef.current?.openHistory(record);
  };

  return (
    <div className="config">
      <div className="content">
        <div className="title">偏贴后旋转配置</div>
        <Button type="primary" className="add-button" onClick={() => handleConfig('add')}>
          新增
        </Button>
        <Table
          rowKey={'uid'}
          className="configTable"
          columns={columns}
          bordered={true}
          dataSource={tableData}
          // scroll={{ y: 700 }}
          pagination={false}
        />

        {/* 过漏检明细配置 */}
        <OnConfiguration />
        <Pagination className="papgation" showSizeChanger={false} current={pageNum} total={total} onChange={onChangePage} showTotal={() => `总数:${total}`} pageSize={pageSize} />
      </div>

      <SettingDialog ref={settingRef} success={initHandle} />
      <HistoryDialog ref={historyRef} />
    </div>
  );
};
export default config;
